<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <link rel="stylesheet" href="popup/popup.css">

    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <script src="lib/echart/echarts.min.js"></script>
    <script src="popup/popup.js"></script>
    <script src="flash/flash.js"></script>
</head>
<body>
<div id="map" style="width: 100%">
</div>
<!--<div id="popup" class="ol-popup" style="display: none;">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>-->
<!--    <div id="ppp" class="modal-body" style="height: 300px;">
        <div>
            <div><label>用户名</label></div><input id="id" disabled>
            </div>
        <div>
            <div><label>真实姓名</label></div><input id="f_name">
            </div>
        <div>
            <div><label>密码</label></div><input id="f_password" type="password">
            </div>
        <div>
            <div><label>确认密码</label></div><input id="f_confirmpass" type="password">
            </div>
        <div style="text-align: center">
            <button id="dlg-cancel"class="layui-btn">取消</button><button id="dlg-submit" class="layui-btn">确认</button>
            </div>
    </div>-->

<script>
    var webip="http://localhost:";
    var gisip="http://localhost:";
    var webport="8080/";
    var gisport="8080/";
    /*********************************************************地图初始化**********************************************************/
    /*底图初始化*/
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([508881,299705],"EPSG:3857","EPSG:3857"),
        zoom: 18
    });
    var tilePoint = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:point'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolyline = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polyline'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolygon = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {
                'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polygon'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    /*矢量图层初始化*/
    /////////////////////////////////////
    var pointTypename="xcy:point";
    var pointVectorSource = new ol.source.Vector({
        features:[]
    });
    var clusterSource = new ol.source.Cluster({
        distance: 50,
        source: pointVectorSource
    });

    var styleCache = {};
    var styleFunction=function (feature) {
        var size = feature.get('features').length;
        var style = styleCache[size];
        if (!style) {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    stroke: new ol.style.Stroke({
                        color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                        color: '#3399CC'
                    })
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                        color: '#fff'
                    })
                })
            });
            styleCache[size] = style;
        }
        return style;

    };
    var pointVectorLayer = new ol.layer.Vector({
        title:"点",
        source: clusterSource,
        style: styleFunction
        //style:stylePoint,
        //renderMode:'image'
    });
    // map
    var map = new ol.Map({
        layers: [
            //tilePoint,
            tilePolyline,
            tilePolygon,
            pointVectorLayer,
        ],
        view:view,
        target: 'map',
        renderer:"canvas"
    });
    var showHeight= function () {
        $.ajax({
            type: "GET",
            url: gisip+gisport+'geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+pointTypename+'&outputFormat=application%2Fjson&maxFeatures=500',
            dataType:'json',
            success: function(data){
                ////添加自定义弹出框
                var features=data.features;
                for(var i=0;i<features.length;i++)
                {
                    var feature=features[i];
                    var ft=new ol.Feature({
                        geometry:new ol.geom.Point(feature.geometry.coordinates),
                    });
                    ft.attr=feature;
                    pointVectorSource.addFeature(ft);


                }

            }

        });
    };
    setTimeout(window.showHeight,2000);
    /*********************************************************事件初始化**********************************************************/
    /*点击事件初始化*/
    var select=new ol.interaction.Select({
        //condition: ol.events.condition.pointerMove,
        layers:[pointVectorLayer],
        multi:true,
        /*        style:function (feature) {
         return st(feature,true);
         }*/
    });
    var popup=new Popup(map);
    select.on("select",function (e) {
        var features=e.selected;
        /*        var dom=$("#popup");
         if(features.length==0)
         {
         dom.hide();
         }
         else
         {
         var feature=features[0];
         dom.show();
         $("#popup-content").html(feature.attr.properties.Text+"啊手动阀手动阀手动阀手动阀手动阀手动阀");
         $("#popup-closer").click(function () {
         dom.hide();
         });
         var overlay= new ol.Overlay({
         element:dom[0],
         //element:$(".pop")[0],
         position:feature.getGeometry().getCoordinates(),
         positioning:"center-center"
         });
         map.addOverlay(overlay);
         }*/
        if (features.length==0)
        {
            popup.hide();
        }
        else
        {
            var feature=features[0];
            var num=feature.getProperties().features.length;
            if (num>1)
            {
                map.getView().animate({center: feature.getGeometry().getCoordinates(),duration:300}, {zoom: map.getView().getZoom()+1,duration:300});
            }
            else
            {
                popup.show("标题",feature.getProperties().features[0].attr.properties.Text+"<br>名称：谢晨阳<br>性别：男", feature.getGeometry().getCoordinates());

            }
        }
    });
    map.addInteraction(select);
    /*分辨率变化事件初始化*/
    map.getView().on(["change:resolution","change:center"],function (e) {
        select.getFeatures().clear();
    });



</script>
</body>
</html>